import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Alert from '@material-ui/lab/Alert';
import DataGrid from 'react-data-grid';
import { loc, is_empty } from 'sui';

const useGlobStyle = makeStyles(theme => ({
    root: {
        backgroundColor: '#3082ce',
        color: 'white',
        '&:hover .rdg-cell': {
            backgroundColor: '#2a6cb0',
            color: 'white',
        },
    }
}));

const EmptyRowsRenderer = () => (
    <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
        <Alert severity="info">{loc("l_536")}</Alert>
    </div>
);

/* col: [
 *   {name: "序号", key: 'index', width: 40, frozen: true},
 *   {name: "操作", key: 'e_opt', width: 180, frozen: true, formatter: (props) => {
 *      const d = props.row;
 *      return ();
 *   }},
 * ]
 *
 * row : [
 *   {index: '1', sn: "abc"},
 *   {index: '2', sn: "bcd"},
 * ]
 *
 * const [select, hselect] = useState(new Set());
 * const hget = (d) => d.uid;
 *
 * const [egroup, hegroup] = useState(new Set());
 *
 * hclick = (row, col) => {}
 *
 * hlight = (row) => row.id.includes('7') ? highlightClassname : undefined)}
*/
const GridTable = ({ col, row, high, sumrow, rowHeight, group, hgroup, egroup, hegroup, gref, select, hselect, hget, hlight, hclick }) => {
    const classes = useGlobStyle();

    if (is_empty(col)) {
        return null;
    }

    col.forEach(d => {
        d["resizable"] = true;

        if (d.key === "e_opt") {
            return;
        }

        if (d.formatter) {
            return;
        }

        d["editor"] = ({ row, column }) => <input className="grid-txt" readOnly value={"" + row[column.key]} ref={e => {
            if (e) {
                e.select();
            }
        }}/>;
    });

    const getRow = () => {
        if (is_empty(row)) {
            return [];
        }

        return row;
    };

    return (
        <DataGrid
            rowKeyGetter={hget}
            ref={gref}
            rowHeight={rowHeight}
            noRowsFallback={<EmptyRowsRenderer/>}
            columns={col}
            rows={getRow()}
            summaryRows={sumrow}
            groupBy={group}
            rowGrouper={hgroup}
            expandedGroupIds={egroup}
            onExpandedGroupIdsChange={hegroup}
            selectedRows={select}
            onSelectedRowsChange={hselect}
            rowClass={v => {
                if (hlight && hlight(v)) {
                    return classes.root;
                }

                return null;
            }}
            onRowClick={hclick}
            style={{ height: high + "px" }}/>
    );
};

const filter_row = (row, col, filter) => {
    if (is_empty(row)) {
        return null;
    }

    if (!filter || is_empty(col)) {
        return row;
    }

    let ret = row.filter(d => {
        for (let i = 0; i < col.length; i++) {
            const c = col[i];
            if (c === "index" || c === "e_opt") {
                continue;
            }

            let tmp = "" + d[c];
            if (!tmp) {
                continue;
            }

            const find = filter.toLowerCase();
            tmp = tmp.toLowerCase();

            if (tmp.indexOf(find) >= 0) {
                return true;
            }
        }

        return false;
    });

    return ret;
};

export {filter_row,  GridTable};
